<!--公司制度-列表-新增-->
<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div class="opNotice">
    <div class="opNoticeTop">
      <div>资讯详情</div>
    </div>
    <div class="opNoticeMain">
      <div class="item">
        <div>发送部门：</div>
        <div>{{userInfoVal | strFun}}</div>     
      </div>
      <div class="item">
        <div>主题：</div>
        <div>{{titleVal | strFun}}</div>
      </div>
      <div class="item">
        <div>类目：</div>
        <div>
          {{regimeVal | strFun}}
        </div>
      </div>
      <div class="item">
        <div>正文：</div>
        <div class="editorBox"  v-html="inputContentHtml"></div>
      </div>
       <div class="item">
        <div>封面图片：</div>
        <div>
          <img :src="coverImg" alt="">
        </div>
      </div>
      <!-- <div class="button">
        <div @click="saveClick">保存</div>
        <div @click="cancelsClick">取消</div>
      </div> -->
    </div>
    <!-- 弹出框选择部门人员组件 -->
    <v-addPelete :isupdatePop="updatePopShow" @affirm="affirmUserListsClick" @cancel="cancelUserListsClick" :userselectpop="userselectpopLists"></v-addPelete>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import WangEditor from "wangeditor";
const crypto = require("crypto");
import addPelete from "../../../cModel/addDeptiUsers.vue";
export default {
  components: {
    "v-addPelete": addPelete
  },
  data() {
    return {
      updatePopShow: false, // 人员选择列表
      userselectpopLists: [], // 已选中的人员-编辑时使用

      orgIdVal: "",
      catalogIdVal: "",
      idVal: "",
      deptStr: "",
      userStr: "",
      regimeLists: [],

      userInfoVal: "", // 发送范围
      isRedReceiveVal: false,
      isGrayReceiveVal: true,

      isRedContentHtmlVal: false, // 正文
      isGrayContentHtmlVal: true, // 正文

      titleVal: "", // 标题
      isRedTitleVal: false,
      isGrayTitleVal: true,

      regimeVal: "公司制度", // 类目
      isRedRegimeVal: false,
      isGrayRegimeVal: true,
      editor: null,
      editorData: null, //编辑器对象
      inputContentHtml: "", //渲染编辑器html
      contentVal: "", //编辑器html字符串
      inputText: "", //编辑器文本字符串

      isRedcoverImgVal: false,
      isGraycoverImgVal: true,
      coverImg: "/static/img/123.png",

      saveClickTrueOrFalse: true,
      isShowSelectOrInput: true
    };
  },
  filters: {
    strFun(val) {
      if (val) {
        return val;
      } else {
        return "暂无";
      }
    }
  },
  created: function() {
    var self = this;
    self.orgIdVal = sessionStorage.getItem("ORGID");
    self.idVal = self.$route.query.id;
    self.catalogIdVal = sessionStorage.getItem("catalogIdVal");
    self.getListDetail();
    self.IdlistFun();
  },
  mounted() {
    // this.createEditorFun();
  },
  methods: {
    // 选择成员
    setReceiverClick() {
      var self = this;
      this.updatePopShow = true;
    },
    // 选择人员确认
    affirmUserListsClick(val) {
      var self = this;
      if (val) {
        var deptListsArr = [];
        var userListsArr = [];
        if (val.userLists.length > 0) {
          val.userLists.forEach(function(ele, ind) {
            userListsArr.push(ele.memberId);
          });
          self.memberIdVals = userListsArr.join(","); // 成员id
          self.userStr =
            val.userLists[0].name + "等" + val.userLists.length + "个人员。";
        }
        if (val.deptLists.length > 0) {
          val.deptLists.forEach(function(ele, ind) {
            deptListsArr.push(ele.memberId);
          });
          self.deptsIdVals = deptListsArr.join(","); // 部门id
          self.deptStr =
            val.deptLists[0].name + "等" + val.deptLists.length + "个部门。";
        }
        self.userselectpopLists = val;
        self.userInfoVal = "你选择了" + self.deptStr + self.userStr;
      } else {
        self.userselectpopLists = [];
        self.memberIdVals = "";
        self.deptsIdVals = "";
        self.userInfoVal = "请选择成员";
      }
      this.updatePopShow = false;
    },
    // 选择人员取消
    cancelUserListsClick() {
      this.updatePopShow = false;
    },
    // 查询资讯详情
    getListDetail() {
      var self = this;
      self
        .getWebInfoDetail({
          id: self.idVal
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.deptStr = data.data.departmentName;
              self.userInfoVal = data.data.departmentName;
              self.titleVal = data.data.title;
              self.inputContentHtml = data.data.content;
              self.coverImg = data.data.pictureUrl;
              self.contentVal = data.data.content;
              self.regimeVal = data.data.catalogName;
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 选择类目
    selectregimeVal() {
      console.log(this.regimeVal);
    },
    // 目录结构列表
    IdlistFun() {
      var self = this;
      self
        .getWebInfoParent({
          orgId: self.orgIdVal
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              if (data.data[1].lower) {
                self.isShowSelectOrInput = true;
                self.regimeLists = data.data[1].lower;
                // self.regimeVal = data.data[1].lower[0].id;
              } else {
                self.isShowSelectOrInput = false;
              }
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 修改
    saveClick() {
      var self = this;
      if (self.validateFun() == false) {
        return false;
      } else {
        if (self.saveClickTrueOrFalse == true) {
          self.saveClickTrueOrFalse = false;
          var obj = {
            id: self.idVal,
            oneCatalogId: self.catalogIdVal,
            catalogId: self.regimeVal,
            orgId: self.orgIdVal,
            departmentName: self.deptStr,
            title: self.titleVal,
            pictureUrl: self.coverImg,
            content: self.contentVal
          };
          var object = JSON.stringify(obj);

          self
            .getWebInfoUpdate(object)
            .then(data => {
              self.saveClickTrueOrFalse = true;
              if (data.statusCode == 200) {
                self.$message({
                  type: "success",
                  message: "修改成功"
                });
                sessionStorage.removeItem("catalogIdVal");
                sessionStorage.removeItem("idVal");
                self.$router.push({
                  path:
                    "/home/information/systemInformation/listinteriorcultivateInformation"
                });
                self.listFun();
              } else if (data.statusCode == "200003") {
                self.$message({
                  type: "info",
                  message: data.statusMessage
                });
                this.$router.push({
                  path: "/login"
                });
              } else {
                self.$message({
                  type: "info",
                  message: data.statusMessage
                });
              }
            })
            .catch(msg => {
              self.saveClickTrueOrFalse = true;
              // self.$message({
              //     type: 'info',
              //     message: '服务器异常'
              // })
            });
        }
      }
    },
    // 验证
    validateFun() {
      var self = this;
      var regOne = /^[\s]*$/; //输入不能为空
      var regTwo = new RegExp(/^[\u4e00-\u9fa5]{1,15}$/);
      var regThree = new RegExp(
        "[+`~@#$^&*()=|{}\\[\\]<>/@#￥&*;（）——|{}【】]"
      );
      // self.userInfoVal = '12334'
      // if (self.userInfoVal.length > 0) {
      //   self.isRedReceiveVal = true
      //   self.isGrayReceiveVal = false
      // } else {
      //   self.isRedReceiveVal = false
      //   self.isGrayReceiveVal = true
      // }
      if (regOne.test(self.titleVal) || !regTwo.test(self.titleVal)) {
        self.isRedTitleVal = true;
        self.isGrayTitleVal = false;
      } else {
        self.isRedTitleVal = false;
        self.isGrayTitleVal = true;
      }
      if (self.contentVal) {
        if (self.contentVal.length > 0 && self.contentVal.length < 2000) {
          this.isRedContentHtmlVal = false;
          this.isGrayContentHtmlVal = true;
        } else {
          this.isRedContentHtmlVal = true;
          this.isGrayContentHtmlVal = false;
        }
      } else {
        this.isRedContentHtmlVal = true;
        this.isGrayContentHtmlVal = false;
      }
      if (self.coverImg == "/static/img/123.png") {
        self.isRedcoverImgVal = true;
        self.isGraycoverImgVal = false;
      } else {
        self.isRedcoverImgVal = false;
        self.isGraycoverImgVal = true;
      }
      if (
        self.isRedTitleVal == true ||
        self.isRedcoverImgVal == true ||
        self.isRedContentHtmlVal == true
      ) {
        return false;
      }
    },
    // 设置接收人
    setReceiverClick() {
      this.selectPopupShow = true;
    },
    // 关闭弹框
    cancelClick() {
      this.selectPopupShow = false;
    },
    // // 编辑器
    // createEditorFun() {
    //   const self = this;
    //   self.editor = new WangEditor("editor");
    //   self.editorData = self.editor;
    //   self.editor.config.menus = [
    //     "lineheight",
    //     "indent",
    //     "eraser",
    //     "forecolor",
    //     "bgcolor",
    //     "quote",
    //     "fontfamily",
    //     "fontsize",
    //     "head",
    //     "unorderlist",
    //     "orderlist",
    //     "alignleft",
    //     "aligncenter",
    //     "alignright",
    //     "link",
    //     "unlink",
    //     "img",
    //     "undo",
    //     "redo"
    //     // "fullscreen"
    //   ];
    //   self.editor.config.zIndex = 100;
    //   self.editor.config.menuFixed = false;
    //   // 设置 headers（举例）
    //   self.editor.config.uploadHeaders = {
    //     Accept: "*"
    //   };
    //   // 上传图片（举例）
    //   // upload-2-control  upload-pic
    //   self.editor.config.uploadImgUrl = "/file/upload-2-control";
    //   self.editor.config.uploadImgFileName = "file";
    //   var uploadStr = "";
    //   var possible =
    //     "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    //   for (var i = 0; i < 16; i++) {
    //     uploadStr += possible.charAt(
    //       Math.floor(Math.random() * possible.length)
    //     );
    //   }
    //   console.log(22222);
    //   var shaCode = crypto.createHash("md5");
    //   self.uploadtext = shaCode
    //     .update(uploadStr, "utf-8")
    //     .digest("hex")
    //     .toUpperCase();
    //   self.editor.config.uploadParams = {
    //     appKey: 1111111,
    //     ext: "png",
    //     fileSize: "1300",
    //     md5: self.uploadtext
    //   };
    //   // 隐藏掉插入网络图片功能。该配置，只有在你正确配置了图片上传功能之后才可用。
    //   // self.editor.config.hideLinkImg = true;
    //   self.editor.onchange = function() {
    //     var uploadS1tr = "";
    //     var possible =
    //       "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    //     for (var i = 0; i < 16; i++) {
    //       uploadS1tr += possible.charAt(
    //         Math.floor(Math.random() * possible.length)
    //       );
    //     }
    //     var shaCode = crypto.createHash("md5");
    //     self.uploadtext = shaCode
    //       .update(uploadS1tr, "utf-8")
    //       .digest("hex")
    //       .toUpperCase();
    //     self.editor.config.uploadParams = {
    //       appKey: 1111111,
    //       ext: "png",
    //       fileSize: "1300",
    //       md5: self.uploadtext
    //     };

    //     self.contentVal = self.editor.$txt.html();
    //     self.inputText = self.editor.$txt.text();
    //     var videos = self.editor.$txt.find("iframe");
    //     // this.videoLength = videos.length
    //     if (videos.length > 3) {
    //       self.videoLength = false;
    //     } else if (videos.length <= 3) {
    //       self.videoLength = true;
    //     }
    //   };
    //   self.editor.create();
    // },
    // 选择上传图片
    onFileChange(e) {
      var self = this;
      var files = e.target.files || e.dataTransfer.files;
      var fileData = files[0];
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result;
        var image = new Image();
        image.onload = function() {
          if (image.width !== 750 || image.height !== 300) {
            self.isRedcoverImgVal = true;
            self.isGraycoverImgVal = false;
          } else if (fileData.size > 5242880) {
            self.isRedcoverImgVal = true;
            self.isGraycoverImgVal = false;
          } else {
            self.isRedcoverImgVal = false;
            self.isGraycoverImgVal = true;
            self.uploadImage(files[0]);
          }
        };
        image.src = data;
      };
      reader.readAsDataURL(fileData);
    },
    // 上传图片
    uploadImage(file) {
      var self = this;
      var formdata = new FormData();
      formdata.append("file", file);
      formdata.append("appKey", 111111);
      formdata.append("ext", file.name.split(".")[1]);
      formdata.append("fileSize", file.size);
      var text = "";
      var possible =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      for (var i = 0; i < 16; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
      var shaCode = crypto.createHash("md5");
      var md5Str = shaCode
        .update(text, "utf-8")
        .digest("hex")
        .toUpperCase();
      formdata.append("md5", md5Str);
      self
        .getfileuploadPic(formdata)
        .then(data => {
          if (data.statusCode == 200) {
            self.$message({
              message: "上传图片成功",
              type: "success"
            });
            self.coverImg = data.data.url;
            document.getElementById("logofile").value = "";
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    upload: function() {
      document.getElementById("logofile").click();
    },
    // 取消
    cancelsClick() {
      var self = this;
      self.$router.push({
        path:
          "/home/information/systemInformation/listinteriorcultivateInformation"
      });
      sessionStorage.removeItem("catalogIdVal");
      sessionStorage.removeItem("idVal");
    },
    ...mapActions([
      "getWebInfoDetail",
      "getWebInfoParent",
      "getWebInfoUpdate",
      "getfileuploadPic"
    ])
  },
  watch: {
    authorVal(val) {
      if (val) {
        var strReg = new RegExp(/^[\u4e00-\u9fa5]{1,10}$/);
        if (strReg.test(val) == false) {
          this.isRedAuthorVal = true;
          this.isGrayAuthorVal = false;
        } else {
          this.isRedAuthorVal = false;
          this.isGrayAuthorVal = true;
        }
      } else {
        this.isRedAuthorVal = false;
        this.isGrayAuthorVal = true;
      }
    },
    titleVal(val) {
      if (val) {
        var strReg = new RegExp(/^[\u4e00-\u9fa5]{1,15}$/);
        if (strReg.test(val) == false) {
          this.isRedTitleVal = true;
          this.isGrayTitleVal = false;
        } else {
          this.isRedTitleVal = false;
          this.isGrayTitleVal = true;
        }
      } else {
        this.isRedTitleVal = false;
        this.isGrayTitleVal = true;
      }
    },
    contentVal(val) {
      var self = this;
      if (val) {
        if (val.length > 0 && val.length < 2000) {
          this.isRedContentHtmlVal = false;
          this.isGrayContentHtmlVal = true;
        } else {
          this.isRedContentHtmlVal = true;
          this.isGrayContentHtmlVal = false;
        }
      } else {
        this.isRedContentHtmlVal = true;
        this.isGrayContentHtmlVal = false;
      }
    }
  }
};
</script>
<style scoped>
.opNotice {
  overflow: hidden;
  width: 100%;
  background-color: #fff;
  min-height: 500px;
  padding-bottom: 20px;
}

.opNoticeTop div {
  color: #303030;
  font-size: 14px;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-left: 44px;
  width: calc(100% - 88px);
  border-bottom: 1px solid #d9d9d9;
}

.opNoticeTop {
  width: 100%;
}

.opNoticeMain {
  margin-left: 44px;
  width: calc(100% - 88px);
}

.opNoticeMain .item span {
  color: rgb(180, 16, 16);
}

.opNoticeMain .item input {
  width: 240px;
  height: 34px;
  border-radius: 4px;
  padding-left: 20px;
}

.opNoticeMain .item select {
  width: 200px;
  height: 34px;
  border-radius: 4px;
  padding-left: 20px;
  color: #8e8f94;
}

.opNoticeMain .item > div:nth-child(1) {
  margin-right: 10px;
}

.opNoticeMain .item:nth-child(2) > div:nth-child(1) {
  margin-left: 28px;
}

.opNoticeMain .item:nth-child(3) > div:nth-child(1) {
  margin-left: 28px;
}

.opNoticeMain .item:nth-child(4) > div:nth-child(1) {
  margin-left: 28px;
}

.opNoticeMain .item:nth-child(4),
.opNoticeMain .item:nth-child(5) {
  align-items: flex-start;
}

.opNoticeMain .item:nth-child(5) {
  margin-top: 24px;
  position: relative;
}

.opNoticeMain .item:nth-child(5) img {
  width: 80px;
  height: 80px;
  border: 1px solid #d9d9d9;
}

.opNoticeMain .item:nth-child(5) input {
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: #38adff;
  font-size: 14px;
  color: #fff;
  position: absolute;
  left: 183px;
  text-align: center;
  padding: 0;
  bottom: 40px;
  cursor: pointer;
}

#coverImgTips {
  /* color: #8f8e94; */
  padding-bottom: 10px !important;
}

.button {
  display: flex;
  justify-content: center;
  margin: 30px auto;
}

.button > div {
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
  margin-right: 50px;
  cursor: pointer;
}

.button > div:nth-child(1) {
  background: #38adff;
}

.button > div:nth-child(2) {
  background: #8e8f94;
}

/* 编译器 */

.editorBox {
  width: 80%;
}

.opNoticeMain .item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 24px;
}

#inputTips {
  display: inline;
  margin-left: 20px;
}

#editorTips {
  margin-top: 10px;
}

/* ***************************************************** */

.centerLeftBotOneI {
  width: 310px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  color: #000;
}

.selectPopup-but {
  height: 60px;
  width: 100%;
  background-color: #f0f6fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e5e5e5;
}

.selectPopup-but > div:nth-child(2) {
  width: 55px;
  height: 35px;
  border-radius: 4px;
  background-color: #38adff;
  text-align: center;
  line-height: 35px;
  color: #fff;
  margin-right: 25px;
  cursor: pointer;
}

.slide-fade-enter-active {
  transition: all 0.7s ease;
}

.slide-fade-enter,
.slide-fade-leave-active {
  transform: translateY(-30px);
  opacity: 0;
}

.redBorder {
  border: 1px solid #38adff !important;
}

.grayBorder {
  border: 1px solid #d9d9d9 !important;
}

.redTest {
  color: #38adff !important;
}

.grayTest {
  color: #8e8f94 !important;
}

input::-webkit-input-placeholder {
  color: #8e8f94;
  font-size: 13px;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #8e8f94;
  font-size: 13px;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #8e8f94;
  font-size: 13px;
}

input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #8e8f94;
  font-size: 13px;
}
</style>